<script lang='ts' setup>
import GenFatForm from "../view/fat-form-create-view.vue"
import { IFatForm } from '../type';

const props = defineProps<{
  config: IFatForm;
  show: boolean;
}>()
const emit = defineEmits<{
  (event: "update:show", data: boolean): void
}>()
const show = computed({
  get() { return props.show },
  set(val) { emit('update:show', val) }
})
const view = reactive({
  visible: false,
  loading: true,
  data: {},
  open() {
    view.loading = true
    view.visible = true
    // view.data = data.value
    view.loading = false
  },
  close() {
    view.visible = false
    emit("update:show", false)
  },
  submit: (params: any) => {
    view.data = params
    console.log('提交表单', params);
  }
})
</script>

<template>
  <el-dialog title="表单预览" v-model="show" top="5vh" :width="config.formConfig.width + config.formConfig.widthUnit"
    :before-close="view.close" destroy-on-close>
    <el-scrollbar max-height="60vh">
      <GenFatForm v-model="view.data" :form-setting="config" @submit="view.submit" style="background-color: #eee;">
        <template #footer="{ formSubmit }">
          <el-button @click="formSubmit">提交</el-button>
        </template>
      </GenFatForm>
    </el-scrollbar>
    <template #footer>
      <span>
        <el-button @click="view.close">关闭</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<style lang='scss' scoped></style>